<template>
	<div class="passlogin">
		<div class="content">
			<h3 class="my-h3">自驾游商户管理后台</h3>
			<div class="row">
				<input class="name" type="text" placeholder="请输入用户名" v-model="name" @blur="getsontext({text:'name',name:name})" />
			</div>
			<div class="row">
				<input class="pass" type="password" placeholder="请输入密码" v-model="password" @blur="getsontext({text:'password',name:password})" />
			</div>
			<div class="row">
				<div class="reg" @click="checkbox">
					<span style="cursor: pointer;" @click="toreg()">注册账号</span>
					<span class="right">
						<span class="gou" v-show="checked">
							<span class="el-icon-check"></span>
						</span>
						<span class="gou-bor" v-show="!checked">
						</span>
						记住密码
					</span>
				</div>
			</div>
			<div class="row">
				<span class="login" @click="Login()">登录</span>
			</div>
			<div class="row">
				<span class="wechat" @click="WxLogin()">
					<img src="../assets/img/login/weix.png">
					微信快捷登录</span>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../fetch/api'
	import Cookie from "../fetch/cookie.js"
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import LabelInput from "./LabelInput.vue";
	export default {
		data() {
			return {
				username: "",
				password: "",
				checked: true,
				name: "",
				password: "",
				LabelInput: [{
						label: "账户名称",
						name: "",
						text: "name",
						buttonStart: false,
						buttonText: ""
					},
					{
						label: "登录密码",
						name: "",
						text: "password",
						buttonStart: false,
						buttonText: "",
						showpassword: true
					},
				]
			}
		},
		components: {
			LabelInput,
		},
		created() {

		},
		mounted() {

			if (this.$api.getQueryString("unionid") != null) {
				var req_login = JSON.parse(JSON.stringify(this.loginlogin)); //this.templateData是父组件传递的对象
				req_login['wx_unionid'] = this.$api.getQueryString("unionid");
				this.getloginLogin(req_login)
				this.Login()
			}
		},
		computed: {
			...mapGetters([
				'loginlogin',
				'login_register_start',
				'UserInfo_data'
			])
		},
		methods: {
			...mapActions({
				getloginLogin: 'getloginLogin',
				setLoginregisterstart: 'setLoginregisterstart',
				setToken: 'setToken',
				getUserInfo: 'getUserInfo'
			}),
			checkbox() {
				this.checked = !this.checked
			},
			WxLogin() {
				this.$api.GetWxLogin({})
			},
			Login() {
				if (this.loginlogin.name === '') {
					this.$alert('请输入用户名', '提示', {
						confirmButtonText: '确定',

					})
					return
				}
				this.$api.GetLogin(this.loginlogin)
					.then(res => {
						if (res.code === 400) {
							//微信登录绑定
							this.setLoginregisterstart("wx_inputAuthorize")
							this.$api.GetInputAuthorize();
						}
						if (res.code === 300) {
							var req_login = JSON.parse(JSON.stringify(this.loginlogin)); //this.templateData是父组件传递的对象
							delete req_login['wx_unionid'];
							this.getloginLogin(req_login)
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									this.$router.push('/LoginIndex')
								}
							});
							return
						}
						if (res.code === 200) {
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									this.setToken(res.token);
									if (this.checked) {
										Cookie.Cookieset('token', res.token, "7d")
									}
									this.UserInfo(res.token);
									this.getloginLogin({
										name: "", //String	 账号
										password: "", //String	 密码
									})
								}
							});
						}
					})
			},
			UserInfo(token) {
				this.$api.GetUserInfo({
						token: token
					})
					.then(res => {
						if (res.code === 200) {
							this.getUserInfo(res.result)
							if (this.UserInfo_data.channel_id != undefined || this.UserInfo_data.channel_id != 0) {
								for (var i = 0; i < this.UserInfo_data.status.length; i++) {
									if (this.UserInfo_data.status[i] === '3') {
										this.$router.push('/Oticket');
									} else if (this.UserInfo_data.status[i] === '7') {
										this.$router.push('/');
									} else {
										this.$router.push('/index');
									}
								}
							}
						}
						if (res.code === 310) {
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									Cookie.Cookiedel("token")
									this.setToken("");
									this.$router.push("/LoginIndex");
								}
							});
						}
					})
			},
			getsontext(res) {
				var req_login = JSON.parse(JSON.stringify(this.loginlogin)); //this.templateData是父组件传递的对象
				req_login[res.text] = res.name;
				this.getloginLogin(req_login)
			},
			toreg() {
				this.$router.push("/LoginRegister")
			}
		},
		watch: {
			checked(newValue, oldValue) {

			}
		},
	}
</script>

<style scoped lang="less">
	.passlogin {
		width: 322px;
		height: 372px;
		position: absolute;
		top: 188px;
		left: 64%;
		background: url('../assets/img/login/login-1.png');
		box-sizing: border-box;

		.content {
			width: 250px;
			height: 275px;

			.my-h3 {
				padding: 28px 0 15px;
				box-sizing: border-box;
				font-size: 16px;
				line-height: 16px;
			}

			.row {
				padding: 10px 0;
				box-sizing: border-box;
				font-size: 12px;
				color: #999;

				&:last-child {
					padding-top: 0;
				}

				input {
					width: 200px;
					height: 30px;
					border: 1px solid #e2dfe0;
					box-sizing: border-box;
					padding-left: 25px;
					box-sizing: border-box;
					color: #333;

					&.name {
						background: url('../assets/img/login/user.png') no-repeat center left;
						background-position-x: 5px;
					}

					&.pass {
						background: url('../assets/img/login/pass.png') no-repeat center left;
						background-position-x: 5px;
					}
				}

				.reg {
					margin: auto;
					width: 200px;
					display: flex;
					justify-content: space-between;
					padding: 0 5px;
					box-sizing: border-box;

					.right {
						display: flex;
						align-items: center;
						color: #0896d8;
						cursor: pointer;

						.gou {
							width: 14px;
							height: 14px;
							background: #0896d8;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 2px;
							margin-right: 10px;

							.el-icon-check {
								font-size: 12px;
								color: #fff;
							}
						}

						.gou-bor {

							width: 14px;
							height: 14px;
							border-radius: 2px;
							margin-right: 10px;
							border: 1px solid #999;
							box-sizing: border-box;
						}
					}
				}

				.login {
					margin: auto;
					display: block;
					width: 188px;
					height: 30px;
					line-height: 30px;
					background: #0896d8;
					color: #fff;
					text-align: center;
					border-radius: 2px;
					box-shadow: 0 3px 1px #0266a2;
				}

				.wechat {
					display: flex;
					width: 200px;
					align-items: center;
					justify-content: center;
					margin: auto;
					cursor: pointer;

					img {
						margin-right: 5px;
					}
				}
			}
		}


	}
</style>
